<template>
  <!-- 顶部滚动选项卡 -->
  <scroll-view
    scroll-x
    class="scroll-row"
    :scroll-into-view="scrollinview"
    :scroll-with-animation="true"
  >
    <view
      v-for="(item, index) in tabs"
      :key="index"
      class="scroll-row-item"
      :id="'item' + index"
      :class="tabindex === index ? 'color1' : ''"
      @tap="changeTab(index)"
    >{{ item.mingchen }}</view>
  </scroll-view>
  <!-- 滚动条 -->
  <swiper
    class="swiper"
    :duration="150"
    :current="tabindex"
    @change="onchangeTab"
    :style="'height:' + listHeight + 'px'"
  >
    <swiper-item v-for="(item2, index3) in newslist" :key="index3">
      <view class="swiper-item">
        <scroll-view scroll-y :style="'height:' + listHeight + 'px'">
          <view v-for="(item1, index1) in newslist" :key="index1">
            <view style="font-size: 35rpx">{{ item1[1] }}</view>

            <view
              v-for="(item, index) in newslist[index1]"
              :key="index"
              :class="item1[0][0].xiaojieming1 ? 'fshu' : ''"
              @tap="clickBtn(item1[index])"
            >
              <!-- 列表 -->
              <view v-if="index % 2 == 0" :style="index % 2 == 0 ? '' : 'display:none'">
                {{
                item1[0][0].xiaojieming1 ? item1[0][0].xiaojieming1 : ''
                }}
              </view>
              <!-- 分割线 -->
              <view
                v-if="index % 2 == 0"
                :class="item1[index][0].fengshu >= 60 ? 'fengshu' : 'fengshu1'"
                :style="index % 2 == 0 ? '' : 'display:none'"
              >{{ item1[index][0].fengshu > 0 ? '分数：' + item1[index][0].fengshu : '分数：0分' }}</view>
              <image
                class="image_6"
                src="https://haoyigou-1318705369.cos.ap-guangzhou.myqcloud.com/%E4%B8%89%E7%82%B9.png"
              />
            </view>

            <view style="height: 5rpx; background-color: #dbd8d8; margin-top: 10rpx"></view>
          </view>
        </scroll-view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
import uniPopup from '../../components/components/uni-popup/uni-popup.vue'
// import uCollapse from '../../components/vk-uview-ui_1.5.2/components/u-collapse/u-collapse.vue'
// import uCollapseItem from '../../components/vk-uview-ui_1.5.2/components/u-collapse-item/u-collapse-item.vue'

import { getHistory, historyshujudati } from '../../services/kaosi'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { reactive, ref, toRefs } from 'vue'

const nianji1 = ShouyeStore()
const user = myStore()
const newslist = ref<any>([])
const tabindex = ref(0)
const tabs = ref<any>([])
//改变tabIndex
const scrollinview = ref('')
const changeTab = async (index) => {
  // if (tabindex.value === index) return
  // 选项卡点击
  tabs.value[index].active = 'true'
  // 选项卡点击，tabindex要等于e.index
  tabindex.value = index
  // 滚动到指定元素

  scrollinview.value = 'item' + index
  // 获取历史数据
  let res1 = await historyshujudati({ user: user.userinfo, item: tabs.value[index].mingchen })

  newslist.value = res1.data
  console.log(newslist.value, '555')
}
onLoad(async () => {
  // 提示按确认

  // 选项卡点击，tabindex要等于e.index
  // scrollinview.value = 'item' + tabindex.value
  uni.getSystemInfo({
    success: (res) => {
      console.log(res.windowHeight, '可视话高度')

      listHeight.value = res.windowHeight - uni.upx2px(201)
    },
  })
})
onShow(async () => {
  // 获取上列表数据
  let res: any = await getHistory({ nianji: nianji1.nianji })
  console.log(res, 'wwwwwwwwwwww')
  tabs.value = res.data
  changeTab(0)
})

// 计算高度
// 默认列表高度
const listHeight = ref(800)
// 滚动条滑动
const onchangeTab = (e) => {
  changeTab(e.detail.current)
}

// 提交
const clickBtn = (item) => {
  let cuoti = 0
  let yitaofenshu = 100 / item.length
  console.log(item, '我咳咳咳咳咳')
  item.forEach((item1, index) => {
    if (item1['my_right'] == 'false') {
      cuoti++
    }
  })
  let zuodui = item.length - cuoti
  let zonfen = zuodui * yitaofenshu
  let falg = 'chaxun'
  console.log(zuodui, '总分为')
  console.log('点击~~')
  uni.navigateTo({
    url:
      '../tijiaojieguo/index?fengshu=' +
      item[0].fengshu +
      '&timu=' +
      encodeURIComponent(JSON.stringify(item)) +
      '&zuodui=' +
      zuodui +
      '&minutes=' +
      item[0].minutes +
      '&seconds=' +
      item[0].seconds +
      '&chaxun=' +
      falg,
    success: (res) => {
      console.log(res, '跳转成功')
    },
  })
}
</script>

<style scoped lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
.daxiao {
  // 左右间距20px
  margin-left: 15px;
  // 图标变大
  font-size: 25px;
}
.scroll-row {
  width: 100%;
  white-space: nowrap;
  height: 150rpx;
  background-color: #3e3c6d;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.scroll-row-item {
  display: inline-block !important;
  padding-top: 50rpx;
  padding-bottom: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  font-size: 35rpx;
  color: #ffffff;
}
.color1 {
  color: rgb(255, 60, 0);
  font-size: 40rpx;
  font-weight: 700;
}

/*  */

.swiper {
  height: 1000rpx;
}
.loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  background-color: #f9f5f5;
  padding: 30rpx;
}
.font {
  font-size: 30rpx;
  color: #a9a5a0;
}
// 聊天图标的红点
.weizhi {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: rgb(30, 125, 219);
}
.fshu {
  // 加粗

  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  //
  margin-top: 30rpx;
  // 底部线条
  // border-bottom: 1px solid #373333;
  width: 85%;
  height: 100rpx;
  // 圆润
  border-radius: 13rpx;
  // 背景颜色
  // background-color: rgb(208, 199, 199);

  padding: 30rpx;
}
.image_6 {
  position: relative;
  width: 6.62rpx;
  height: 25.74rpx;
  left: 660rpx;
  bottom: 120rpx;
}
.fengshu {
  color: #15a639;
}
.fengshu1 {
  color: #ec0505;
}
</style>
